<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高德地图+ol</title>
    <link rel="stylesheet" href="css/ol.css"
          />

    <script src="js/ol.js"
            ></script>
    <style>
        #map {
            width: 100%;
            height: 100%;
            position: absolute;
        }
    </style>
</head>


<body>
<div id="map"></div>
<script type="text/javascript">



    // var gaodeMapLayer = new ol.layer.Tile({
    //     title: "titile",
    //     source: new ol.source.XYZ({
    //         url: "http://t{0-7}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=a4ee5c551598a1889adfabff55a5fc27"
    //     })
    // });
    var gaodeMapLayer  =new ol.layer.Tile({ //加载瓦片图层数据
        source: new ol.source.OSM() //数据源，加载OSM数据
    })
    var fa = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [new ol.Feature({
                geometry: new ol.geom.Polygon(
                    [[
                        [120.22940239501227, 30.146807031535218],
                        [120.22940239501227, 30.226915680225147],
                        [120.28948387694587, 30.226915680225147],
                        [120.28948387694587, 30.146807031535218],
                        [120.22940239501227, 30.146807031535218],


                    ]]
                ),
                name: 'pg'
            })]
        }),
    });


    var fb = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [new ol.Feature({
                geometry: new ol.geom.Point(
                    [120.25871185675187, 30.16739619707534]
                ),
                name: 'pg'
            })]
        }),
    });
    var zoomFactorSize = 5;

    var map = new ol.Map({
        layers: [gaodeMapLayer, fa, fb],
        view: new ol.View({
            center: [120.25871185675187, 30.16739619707534],
            projection: 'EPSG:4326',
            zoom: 10*zoomFactorSize,
            zoomFactor: Math.pow(3, 1 / zoomFactorSize),
        }),
        target: 'map'
    });

    // 点选地图用
    map.on('singleclick', function (e) {
        console.log("当前点选");
        console.log("放大级别", map.getView().getZoom());
        console.log(map.getEventCoordinate(e.originalEvent));

    })

</script>
</body>

</html>

